<template>
  <div @click="showPicker" class="picker-common">
    <cube-input
      :readonly="true"
      v-model="text"
      :disabled="true"
      class="picker-type"
      :placeholder="placeholder"
    ></cube-input>
    <i class="iconarrow_right"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Picker: "", //  选择器
      text: this.selectVal.text || ""
    };
  },
  methods: {
    async showPicker() {
      if (this.disabled) {
        return false;
      }
      this.updateFunc && this.updateFunc(this.Picker);
      if (!this.Picker) {
        this.Picker = this.$createPicker({
          title: this.title,
          data: [this.pickerList],
          onSelect: this.selectHandle,
          alias: this.alias,
          swipeTime: 100
        });
      }
      if (this.selectVal.id) {
        let arr = this.Picker.data[0];
        for (let i = 0; i < arr.length; i++) {
          if (this.selectVal.id == arr[i][this.alias.value]) {
            this.Picker.$updateProps({
              selectedIndex: [i]
            });
            break;
          } else {
            this.Picker.$updateProps({
              selectedIndex: []
            });
          }
        }
      }
      this.Picker.show();
    },
    selectHandle(val, index, text) {
      this.text = text[0];
      this.$emit("update:selectData", { id: val[0], text: text[0] });
      this.handleFun && this.handleFun(this.Picker);
    }
  },
  watch: {
    selectVal(n) {
      this.text = n.text;
      if (this.Picker) {
        this.Picker.data[0].forEach((item, index) => {
          if (n.id == item.value) {
            this.Picker.$updateProps({
              selectedIndex: [index]
            });
          } else {
            this.Picker.$updateProps({
              selectedIndex: []
            });
          }
        });
      }
    }
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    handleFun: {
      type: Function
    },
    updateFunc: {
      type: Function
    },
    pickerList: {
      type: Array,
      default() {
        return [];
      }
    },
    placeholder: {
      type: String,
      default: "请选择"
    },
    selectVal: {
      type: Object,
      default() {
        return {
          text: "",
          id: ""
        };
      }
    },
    alias: {
      type: Object,
      default() {
        return { value: "value", text: "text" };
      }
    }
  }
};
</script>

<style lang="stylus">
.picker-common {
  height: 44px;
  line-height: 44px;
  display: flex;
  width: 200px
  flex-flow: row nowrap;
  align-items: center;
  text-align: right;
  justify-content: flex-start;
  .picker-type {
    &::after {
      border: none;
    }
    input{
      text-align: right;
      width 167px
    }
  }
  .iconarrow_right {
    color: #999;
    // transform: translateX(-7px);
  }
}
</style>
